<div [class]="model.fileRootCss" #contentElement>
  <input [class]="model.cssClasses.fileInput" *ngIf="!model.isReadOnlyAttr && !model.isDisabledAttr && model.hasFileUI"
    tabindex="-1" type="file" [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired"
    [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid"
    [attr.aria-errormessage]="model.ariaErrormessage" [attr.multiple]="model.multipleRendered"
    [attr.title]="model.inputTitle" [attr.accept]="model.renderedAcceptedTypes" [attr.capture]="model.renderCapture" />
  <input *ngIf="model.isReadOnlyAttr" type="file" readonly [class]="model.getReadOnlyFileCss()"
    [attr.id]="model.inputId" [attr.multiple]="model.multipleRendered" [attr.placeholder]="model.title"
    style="color: transparent" />
  <input *ngIf="model.isDisabledAttr" type="file" disabled [class]="model.getReadOnlyFileCss()"
    [attr.id]="model.inputId" [attr.multiple]="model.multipleRendered" [attr.placeholder]="model.title"
    style="color: transparent" />
  <div [class]="model.cssClasses.dragArea" (dragenter)="model.onDragEnter($event)" (drop)="model.onDrop($event)"
    (dragover)="model.onDragOver($event)" (dragleave)="model.onDragLeave($event)">
    <div [class]="model.getFileDecoratorCss()" *ngIf="model.showFileDecorator">
      <span *ngIf="model.showDragAreaPlaceholder" [class]="model.cssClasses.dragAreaPlaceholder" [model]="model.locRenderedPlaceholder" sv-ng-string></span>
      <div [class]="model.cssClasses.wrapper">
        <sv-ng-action-bar [model]="model.actionsContainer" *ngIf="model.actionsContainerVisible"></sv-ng-action-bar>
      </div>
    </div>
    <ng-container *ngIf="model.showLoadingIndicator">
      <div [class]="model.cssClasses.loadingIndicator">
        <sv-ng-loading-indicator></sv-ng-loading-indicator>
      </div>
    </ng-container>
    <ng-container *ngIf="model.isPlayingVideo">
      <ng-container *ngTemplateOutlet="fileVideo"></ng-container>
    </ng-container>
    <ng-container *ngIf="model.allowShowPreview">
      <ng-template [component]="{ name: 'sv-file-preview', data: { question: model } }"></ng-template>
    </ng-container>
    <sv-action-bar *ngIf="model.fileNavigatorVisible" [model]="model.fileNavigator"></sv-action-bar>
  </div>
</div>
<ng-template #fileCleanButton let-css="css">
  <button type="button" [class]="css" (click)="model.doClean()">
    <span>{{ model.clearButtonCaption }}</span>
    <svg *ngIf="model.cssClasses.removeButtonIconId" [iconName]="model.cssClasses.removeButtonIconId" [size]="'auto'"
      [title]="model.clearButtonCaption" sv-ng-svg-icon></svg>
  </button>
</ng-template>
<ng-template #fileVideo>
  <div [class]="model.cssClasses.videoContainer">
    <sv-ng-action [model]="model.changeCameraAction"></sv-ng-action>
    <sv-ng-action [model]="model.closeCameraAction"></sv-ng-action>
    <video autoplay playsinline [attr.id]="model.videoId" [class]="model.cssClasses.video"></video>
    <sv-ng-action [model]="model.takePictureAction"></sv-ng-action>
  </div>
</ng-template>